<div *ngIf="!gitConfig.githubAvailable && !gitConfig.gitlabAvailable" class="card shadow-sm rounded mb-4">
    <div class="card-header bg-light">
        <h2 class="mb-0"><fa-icon [icon]="'wrench'"></fa-icon>&nbsp;<span>没有可用的GitHub或GitLab配置</span></h2>
    </div>
    <div class="card-body">
        <div class="alert alert-info" role="alert">
            此微服务代码模版实例未配置GitHub或GitLab，因此您无法在这些服务上生成应用程序。
        </div>
        <p>
            如果您想在微服务代码模版中使用GitHub或GitLab，请联系您的系统管理员。
        </p>
    </div>
</div>

<div *ngIf="gitConfig.githubAvailable" class="card shadow-sm rounded mb-4">
    <div class="card-header bg-light">
        <h2 class="mb-0"><fa-icon [icon]="'wrench'"></fa-icon>&nbsp;<span>GitHub配置</span></h2>
    </div>
    <div class="card-body">
        <p>
            如果您授权微服务代码模版访问您的GitHub账户，它将：
        </p>
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item bg-light">使用<a routerLink="/generate-application" class="text-primary">在线应用程序生成器</a>在您的账户上创建微服务应用程序。
            </li>
            <li class="list-group-item bg-light">读取生成项目所需的基本用户数据（您的用户名和组织）</li>
        </ul>

        <div class="alert alert-info" role="alert">
            您可以随时在<a href="{{gitConfig.githubHost}}/settings/applications" class="text-primary">GitHub</a>设置中撤销此访问权限。
        </div>

        <ng-container>
            <div class="d-flex justify-content-center mt-4" *ngIf="!githubConfigured">
                <a class="btn btn-primary btn-lg rounded-pill shadow-sm"
                   href="{{gitConfig.githubHost}}/login/oauth/authorize?scope=user,repo,workflow&client_id={{gitConfig.githubClientId}}" role="button">
                <span>
                    <fa-icon [icon]="['fab', 'github']"></fa-icon>
                    &nbsp;授权GitHub
                </span>
                </a>
            </div>
            <div class="d-flex justify-content-center mt-4" *ngIf="githubConfigured">
                <a class="btn btn-warning btn-lg rounded-pill shadow-sm"
                   href="{{gitConfig.githubHost}}/login/oauth/authorize?scope=user,repo,workflow&client_id={{gitConfig.githubClientId}}" role="button">
                <fa-icon [icon]="['fab', 'github']"></fa-icon>&nbsp;代码模版
                    已获得授权，点击此处重新同步您的GitHub账户
                </a>
            </div>
        </ng-container>
    </div>
</div>

<div *ngIf="gitConfig.gitlabAvailable" class="card shadow-sm rounded mb-4">
    <div class="card-header bg-light">
        <h2 class="mb-0"><fa-icon [icon]="'wrench'"></fa-icon>&nbsp;<span>GitLab配置</span></h2>
    </div>
    <div class="card-body">
        <p>
            如果您授权微服务代码模版访问您的GitLab账户，它将：
        </p>
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item bg-light">使用<a routerLink="/generate-application" class="text-primary">在线应用程序生成器</a>在您的账户上创建微服务应用程序。
            </li>
            <li class="list-group-item bg-light">读取生成项目所需的基本用户数据（您的用户名和组织）</li>
        </ul>

        <div class="alert alert-info" role="alert">
            您可以随时在<a href="{{gitConfig.gitlabHost}}/profile/applications" class="text-primary">GitLab</a>设置中撤销此访问权限。
        </div>

        <ng-container>
            <div class="d-flex justify-content-center mt-4" *ngIf="!gitlabConfigured">
                <a class="btn btn-primary btn-lg rounded-pill shadow-sm"
                   href="{{gitConfig.gitlabHost}}/oauth/authorize?client_id={{gitConfig.gitlabClientId}}&redirect_uri={{gitConfig.gitlabRedirectUri}}&response_type=code" role="button">
                <span>
                    <fa-icon [icon]="['fab', 'gitlab']"></fa-icon>
                    &nbsp;授权GitLab
                </span>
                </a>
            </div>
            <div class="d-flex justify-content-center mt-4" *ngIf="gitlabConfigured">
                <a class="btn btn-warning btn-lg rounded-pill shadow-sm"
                   href="{{gitConfig.gitlabHost}}/oauth/authorize?client_id={{gitConfig.gitlabClientId}}&redirect_uri={{gitConfig.gitlabRedirectUri}}&response_type=code" role="button">
                    <fa-icon [icon]="['fab', 'gitlab']"></fa-icon> &nbsp;代码模版
                    已获得授权，点击此处重新同步您的GitLab账户
                </a>
            </div>
        </ng-container>
    </div>
</div>
